<template>
   <div class="box">
        <div ref="lineEchart" id="lineEchart" class="echart"></div>
        <div ref="PieChart" id="PieChart" class="echart" ></div>
        <div class="box_bg"></div>
   </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref , nextTick } from "vue";


const lineEchart = ref(null);
const PieChart   = ref(null);

var lineOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
        type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
        type: 'category',
        data: ['班级1', '班级2', '班级3', '班级4', '班级5'],
            axisTick: {
                alignWithLabel: true
            },
        }
    ],
    axisLabel:{
        color:"#fff"
    },
    yAxis: [
        {
        type: 'value'
        }
    ],
    yxisLabel:{
        color:"#fff"
    },
    series: [
        {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        showBackground: true,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
            ])
        },
        emphasis: {
            itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
            ])
            }
        },
        data: [10, 52, 200, 334, 390]
        }
    ]
};



var PieOption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '2%',
    left: 'left',
    textStyle:{
      color:"#fff"
    }
  },
  series: [
    {
      name: '学校信息',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '学生' },
        { value: 735, name: '老师' },
        { value: 580, name: ' 后勤' },
      ]
    }
  ]
};


nextTick( () => {
    let line = echarts.init(lineEchart.value);
    line.setOption(lineOption);


    let pie = echarts.init(PieChart.value);
    pie.setOption(PieOption);

})







</script>
<style  scoped>
    .box{
        width: 240px;
        height: 540px;

     
    }   
    .box_bg{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        filter: blur(1px);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
        border-radius: 2px;
    }

    .echart{
        width: 96%;
    }

    #lineEchart{
        height: 200px;
        margin: 10px;
    }

    #PieChart{
        margin: 50px 10px 10px;
        height: 220px;
    }
</style>